<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { getAll } from "../api/axios.js";
//社保
const jin: any = ref([]);
//数据
const datas: any = ref([]);
const gong: any = ref([])

const value = ref<Dayjs>();
const onPanelChange = (value: Dayjs, mode: string) => {
  console.log(value, mode);
};

let get = async () => {
  let res = await getAll();
  datas.value = res.data.data;
  console.log(res.data);
  jin.value = res.data.data.providentFund;
  gong.value = res.data.data.providentFund;
  
};
onMounted(() => {
  get();
});

onMounted(() => {

  // 创建 ECharts 实例
  const  myChart = echarts.init(document.getElementById('chart'));

  const  myCharts = echarts.init(document.getElementById('charts'))
  // 绘制图表
  myChart.setOption({
    titles: {
          type:"比起哦提"
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "line",
      },
    ],
  });
  myCharts.setOption({
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "line",
      },
    ],
  });
});
</script>

<template>
  <div class="cont">
    <div class="left">
      <div class="title">
        <div class="title_forst">
          <div class="title_img">
            <img src="../assets/1.png" alt="" class="imgs" />
          </div>
          <div class="title_text">
            <h3>江苏传智播客教育科技有限公司 <span>体验版</span></h3>
            <span>管理员</span> | 传智播客-总裁办
          </div>
        </div>
        <div class="footer">
          <ul>
            <li>
              <h3>组织总人数</h3>
              <h2>{{ datas.employeeTotal }}</h2>
            </li>
            <li>
              <h3>正式员工</h3>
              <h2>{{ datas.regularEmployeeTotal }}</h2>
            </li>
            <li>
              <h3>合同待签署</h3>
              <h2>{{ datas.contractSignTotal }}</h2>
            </li>
            <li>
              <h3>待入职</h3>
              <h2>{{ datas.toBeEmployed }}</h2>
            </li>
            <li>
              <h3>本月待转正</h3>
              <h2>{{ datas.toBeConfirmed }}</h2>
            </li>
            <li>
              <h3>本月待离职</h3>
              <h2>{{ datas.toBeDismissed }}</h2>
            </li>
            <li>
              <h3>接口总访问</h3>
              <h2>{{ datas.interfaceAccessTotal }}</h2>
            </li>
          </ul>
        </div>
      </div>
      <div class="title_content">
        <h3>快捷入口</h3>
        <ul>
          <li>
            <img src="../assets/2.png" alt="" />
            <p>假期审批</p>
          </li>
          <li>
            <img src="../assets/3.png" alt="" />
            <p>社保管理</p>
          </li>
          <li>
            <img src="../assets/4.png" alt="" />
            <p>角色管理</p>
          </li>
          <li>
            <img src="../assets/5.png" alt="" />
            <p>添加员工</p>
          </li>
          <li>
            <img src="../assets/2.png" alt="" />
            <p>添加权限</p>
          </li>
        </ul>
      </div>
      <div class="button">
        <div class="button_first">
          <div class="button_left">
            <h3>社保申报数据</h3>
            <p>申报人数</p>
            <h3>{{ jin.declarationTotal }}</h3>
            <div class="button_footer">
              <ul>
                <li>
                  <p>待审报(人)</p>
                  <h3>{{ jin.toDeclareTotal }}</h3>
                </li>
                <li>
                  <p>申报中(人)</p>
                  <h3>{{ jin.declaringTotal }}</h3>
                </li>
                <li>
                  <p>已申报(人)</p>
                  <h3>{{ jin.declaredTotal }}</h3>
                </li>
              </ul>
            </div>
          </div>
          <div class="button_right">
            <div id="chart" style="width: 300px; height: 300px"></div>
          </div>
        </div>

        <div class="button_first">
          <div class="button_left">
            <h3>公积金申报数据</h3>
            <p>申报人数</p>
            <h3>{{ gong.declarationTotal }}</h3>
            <div class="button_footer">
              <ul>
                <li>
                  <p>待审报(人)</p>
                  <h3>{{ gong.toDeclareTotal }}</h3>
                </li>
                <li>
                  <p>申报中(人)</p>
                  <h3>{{ gong.declaringTotal }}</h3>
                </li>
                <li>
                  <p>已申报(人)</p>
                  <h3>{{ gong.declaredTotal }}</h3>
                </li>
              </ul>
            </div>
          </div>
          <div class="button_right">
            <div id="charts" style="width: 300px; height: 300px"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right_title">
        <div class="right_left">
          <h3>帮助连接</h3>
          <ul>
            <li>
              <img src="../assets/7.png" alt="" />
              <span>入门指南</span>
            </li>
            <li>
              <img src="../assets/8.png" alt="" />
              <span>在线帮助手册</span>
            </li>
            <li>
              <img src="../assets/9.png" alt="" />
              <span>联系技术支持</span>
            </li>
            <li>
              <img src="../assets/11.png" alt="" />
              <span>添加连接</span>
            </li>
          </ul>
        </div>
        <div class="right_first">
          <div :style="{ width: '280px', borderRadius: '4px' }">
            <a-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange" />
          </div>
        </div>
      </div>
      <div class="shaodowm">
        <h3>通知公告</h3>
        <ul>
          <li>
            <img src="../assets/12.png" alt="" />
            <span>传智发布了第一期“传智大讲堂”互动讨论获奖名单</span>
            <p class="size">2022-11-21 12:01:00</p>
          </li>
          <li>
            <img src="../assets/12.png" alt="" />
            <span>黑马程序员发布了第149期“vue实战”获奖小组名单,并颁发证书</span>
            <p>2022-11-11 11:11:11</p>
          </li>
          <li>
            <img src="../assets/12.png" alt="" />
            <span>黑马程序员发布了第161期“react实战”开发的流程和规则</span>
            <p>2022-11-21 12:01:00</p>
          </li>
          <li>
            <img src="../assets/12.png" alt="" />
            <span>传智发布了第一期“传智大讲堂”的参赛名单</span>
            <p>2022-11-21 12:01:00</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>


<style scoped>
.cont {
  display: flex;
}

.left {
  width: 600px;
  height: 1200px;
}

.title {
  width: 600px;
  height: 260px;

  .footer {
    width: 600px;
    height: 150px;

    margin-top: 10px;

    ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      width: 600px;
      height: 100px;

      li {
        width: 100px;
        height: 90px;
        text-align: center;
      }
    }
  }
}

.button {
  width: 600px;
  height: 700px;
}

.button_first {
  width: 600px;
  height: 300px;
  display: flex;
  margin-top: 10px;

  .button_footer {
    width: 300px;
    height: 200px;

    ul {
      display: flex;
      flex-wrap: wrap;

      li {
        width: 100px;
        height: 100px;
      }
    }
  }
}

.button_left {
  width: 300px;
  height: 300px;
}

.button_right {
  width: 300px;
  height: 300px;
}

.title_content {
  width: 600px;
  height: 160px;
  margin-top: 10px;

  ul {
    display: flex;

    li {
      width: 100px;
      height: 100px;
      text-align: center;

      img {
        width: 50px;
        height: 50px;
        margin: 20px;
      }
    }
  }
}

* {
  list-style: none;
}

.title_img {
  width: 80px;
  height: 80px;
}

.title_forst {
  width: 600px;
  height: 80px;
  display: flex;

  .imgs {
    width: 60px;
    height: 60px;
    margin: 10px;
  }

  .title_text {
    margin-top: 10px;
  }
}

.right {
  width: 100vw;
  height: 800px;
  margin-left: 10px;
}

.right_title {
  width: 100%;
  height: 360px;
  display: flex;
}

.right_left {
  width: 280px;
  height: 320px;
  margin-left: 10px;

  li {
    width: 150px;
    height: 70px;
  }
}

.right_first {
  width: 280px;
  height: 360px;
  margin-left: 10px;
}

.shaodowm {
  ul {
    margin-top: 10px;
  }

  li {
    height: 100px;
  }

  img {
    width: 30px;
    height: 30px;
    margin-left: -20px;
  }
}
</style>
